<template>
  <div :style="{width: width,height: height}" v-loading="loading">
    <el-upload
      class="singleImage_uploader"
      :action="`${IMAGEHOST}/File/Upload`"
      :before-upload="beforeUpload"
      :on-success="handleAvatarSuccess"
      :show-file-list="false">
      <div v-if="imgUrl" class="avatar">
        <img-card width="100%" height="100%" :src="imgUrl"></img-card>
        <div class="hover_shade">
          <div class="hover_shade_main">
            <i class="el-icon el-icon-edit-outline"></i>
            <p class="text">点击修改</p>
          </div>
        </div>
      </div>
      <i v-else class="el-icon-plus singleImage_uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import { transformImgUrl } from '@/filters'
export default {
  props: {
    Avatar: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    }
  },
  computed: {
    IMAGEHOST () {
      return process.env.IMAGE_HOST
    }
  },
  data () {
    return {
      loading: false,
      imgUrl: null
    }
  },
  mounted () {
    this.imgUrl = this.Avatar
  },
  methods: {
    transformImgUrl,
    beforeUpload () {
      this.loading = true
    },
    handleAvatarSuccess (result) {
      this.loading = false
      if (result.stateCode === 200) {
        this.imgUrl = result.data.objectId
        this.$emit('success', this.imgUrl)
      } else {
        this.$message.error('上传失败！')
      }
    }
  }
}
</script>
<style lang="less">
</style>
